<!DOCTYPE html>

<html>

	<head>

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<title>仪器共享</title>

		<meta name="keywords" content="科研仪器，生命科学仪器，环境检测仪器，实验常用设备，分析仪器">

		<meta name="description" content="中国领先的科研仪器共享平台，让您快速找到各种类型的科学研究仪器。提升闲置仪器利用率，产生更大科研价值。涵盖：生命科学仪器、环境检测仪器、实验常用设备、分析仪器、仪表、物性测试、测量/计量仪器、在线及过程控制仪器。

">
		<!--<link rel="stylesheet" href="new_css/header_footer.css?t=1">-->
		<link rel="stylesheet" href="new_css/publishInstrument.css">
		<link rel="stylesheet" href="new_css/userCenter.css">
		<link rel="stylesheet" href="css/reset.css">
		<link rel="stylesheet" href="css/common.css">
		<style>
			.header-search-lef .shopping-Mall .logo-mall {
				margin-top: 34px;
			}
			.logo-mall.instrument-management{
				width:74px;
				height:24px;
				background:rgba(237,23,23,1);
				border-radius:2px;
				line-height: 20px;
				text-align: center;
			}
			.logo-mall.instrument-management a{
				font-size: 14px;
				color: #fff;
			}
		</style>
		<style>
			.mainList .content {
				width: 100%;
				display: inline-block;
				height: 1079px;
			}
		</style>
		<style>

			.mainList .content .right{
				padding-top: 18px;
			}
			.mainList .content .right .title .title_btn{
				margin-top: -10px;
			}
			.search-input input#aiya{
				width:208px;
				height:46px;
				border: 1px solid #D3D3D3;
				border-radius: 0px;
			}
			.search-input input#wohenhou{
				width:102px;
				height:46px;
				background:rgba(255,138,0,1);
				color: #ffffff;
				border-radius: 0px;
				margin-left: -5px;
				border: 1px solid rgba(255,138,0,1);
			}

			.select-download-nav{
				margin-left: 20px;
			}
			.select-download-nav select#moni{
				width:208px;
				height:46px;
				border: 1px solid #D3D3D3;
				border-top-left-radius: 0px !important;
			}

			.select-download-nav input#bgf{
				width:102px;
				height:46px;
				background:rgba(255,138,0,1);
				color: #ffffff;
				border-radius: 0px;
				margin-left: -9px;
				border: 1px solid rgba(255,138,0,1);
			}
			.mainList .content .right table th {
				background: #f4f4f4;
				color: #939393;
				font-weight: normal;
				height: 50px;
				width: 950px;
			}

			.mainList .content .right table td {
				/*border: 1px solid #d3d3d3;*/
				text-align: center;
				color: #202020;
				font-size: 14px;
				height: 76px;
			}
			.mainList .content .left {
				width: 192px;
				float: left;
				border: 1px solid #d3d3d3;
				height: 100%;
				min-height: 1000px;
				text-align: center;
				padding-bottom: 18px;
			}

			#nav-tab{height:50px;}
			#nav-tab a{display:block;height:50px;line-height:50px;padding:0 15px;font-size:18px;font-family: 'Microsoft YaHei';float:left;cursor:pointer;}
			#nav-tab a.on{border-bottom: 2px solid #ff8a00;}
			#contentBox .box1{display:none;}
			#contentBox .box1.active-tab{display:block;}
		</style>
		<script src="js/jquery-1.11.3.js"></script>
		<script>
            $(function() {

                $('#front_header .header_wrap .right').hover(function() {
                    $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
                    $('#front_header .header_wrap .right .out').show();
                }, function() {
                    $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
                    $('#front_header .header_wrap .right .out').hide();
                });

                //-----
                $("#item2").mouseover(function(){
                    $(".item2_ul").css("display","block");
                });


                $("#item2").mouseout(function(){
                    $(".item2_ul").css("display","none");
                });


                //----
//				$('#item2').on('mouseover',function() {
//					console.log("111111");
//					$('#item2_ul').css('display','block');
//				}
//				$('#item2').on('mouseout',function() {
//					$('#item2_ul').css('display', 'none');
//				}

                $('#sorts').on('mouseover', 'li', function() {
                    $(this).find('span img').attr('src', 'images/icon4.png');
                });
                $('#sorts').on('mouseout', 'li', function() {
                    $(this).find('span img').attr('src', 'images/icon5.png');
                });

                $('.mainList .content .left li').click(function(){
                    $(this).addClass('selected').siblings().removeClass('selected');
                });
            });
		</script>
		<script>
            $(function() {
                $('#front_header .header_wrap .right').hover(function() {
                    $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
                    $('#front_header .header_wrap .right .out').show();
                }, function() {
                    $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
                    $('#front_header .header_wrap .right .out').hide();
                });
                $('#sorts').on('mouseover', 'li', function() {
                    $(this).find('span img').attr('src', 'images/icon4.png');
                });
                $('#sorts').on('mouseout', 'li', function() {
                    $(this).find('span img').attr('src', 'images/icon5.png');
                });
                $('.mainList .content .left li').click(function() {
                    $('.mainList .content .left li').removeClass('selected');
                    $(this).addClass('selected');
                });
                $('.mainList .content .left .list_header').click(function() {
                    if($('.mainList .content .left .secendList').is(':hidden')) {
                        $('.mainList .content .left .secendList').slideDown();
                        $('.mainList .content .left .list_header img').attr("src", "images/insUser_icon.png");
                    } else {
                        $('.mainList .content .left .secendList').slideUp();
                        $('.mainList .content .left .list_header img').attr("src", "images/icon4.png");
                    };

                });
                $('.mainList .content .left .list_header1').click(function() {
                    if($('.mainList .content .left .secendList1').is(':hidden')) {
                        $('.mainList .content .left .secendList1').slideDown();
                        $('.mainList .content .left .list_header1 img').attr("src", "images/insUser_icon.png");
                    } else {
                        $('.mainList .content .left .secendList1').slideUp();
                        $('.mainList .content .left .list_header1 img').attr("src", "images/icon4.png");
                    };

                });
            });

		</script>
		<script>
            $(function() {
                $('#front_header .header_wrap .right').hover(function() {
                    $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon2.png');
                    $('#front_header .header_wrap .right .out').show();
                }, function() {
                    $('#front_header .header_wrap .right .main .icon img').attr('src', 'images/icon1.png');
                    $('#front_header .header_wrap .right .out').hide();
                });
                $('#sorts').on('mouseover', 'li', function() {
                    $(this).find('span img').attr('src', 'images/icon4.png');
                });
                $('#sorts').on('mouseout', 'li', function() {
                    $(this).find('span img').attr('src', 'images/icon5.png');
                });

                $('.mainList .content .left li').click(function() {
                    $(this).addClass('selected').siblings().removeClass('selected');
                });
                //				$(".mainList .content .right table td input").each(function(){
                //					var index=$(this).parents('tr').index();
                //					$(this).attr('id','select'+index);
                //					$(this).siblings('label').attr('for','select'+index);
                //				});
                $(".mainList .content .right table td label").click(function() {
                    if($(this).siblings('input').is(':checked')){
                        $(this).find('img').attr('src','images/icon35.png');
                        $(this).siblings('input').prop('checked',false);
                    }else{
                        $(this).find('img').attr('src','images/icon36.png');
                        $(this).siblings('input').prop('checked',true);
                    };
                });

            });
		</script>

	</head>

	<body style="background:#fff;">

	<!--header-->
	<header>
		<!--Top head navigation bgc-->
		<div class="top-nav-bgc">
			<!--Top head navigation-->
			<div class="top-nav">
				<!--left-->
				<div class="top-nav-left fl">
					<!--img-->
					<img src="images/home.png">
					<!--companyName-->
					<span><a href="index">观迎访问仪器共享平台</a></span>
				</div>
				<!--right-->
				<div class="top-nav-right fr" >
					<!--username-info-->
					<div class="username-info">
						<!--userImg-->
						<div class="userImg fl">
							<img src="images/user.png">
						</div>
						<!--username-->
						<div class="username fl">
							<ul>
								<li id="username" >
									<a onclick="userImg();" href="">itwangyang@foxmail.com</a>
									<img id="userImg" src="images/icon1.png">
								</li>
							</ul>
							<ul  class="dropdown-nav" id="dropdown-nav" style="display: none">
								<!--<img src="images/icon9.png">-->
								<li>
									<a class="active" href="">用户中心</a>
								</li>
								<li>
									<a href="">退出登录</a>
								</li>
							</ul>
						</div>
						<!--selectNav-->
						<!--<div class="icon-img fl">-->
						<!--<img src="images/icon1.png">-->
						<!--</div>-->
					</div>
				</div>
			</div>
		</div>
		<!--header search-->
		<div class="header-search clearfix">
			<!--left-->
			<div class="header-search-lef fl">
				<div class="logo-name fl" ><a href="index">科研仪器共享平台</a> </div>
				<div class="shopping-Mall fl">
					<div class="logo-mall instrument-management">
						<a href="">机构用户</a>
					</div>
				</div>
			</div>
			<!--right-->
		</div>

	</header>

		<div class="mainList">
			<div class="content">
				<div class="left">
					<div class="title">机构用户</div>
					<ul class="secendList1" id="secendList1">
						<li>仪器管理人员维护</li>
						<li>仪器发布查询 </li>
					</ul>

					<ul>
						<li class="list_header">统计分析<img src="images/insUser_icon.png" /></li>
					</ul>
					<ul class="secendList" id="secendList">
						<li>仪器使用情况分析</li>
						<li>月度经营收入分析</li>
						<li>预约处理效率分析</li>
						<li>违约率统计分析</li>
						<li>用户评价统计分析</li>
					</ul>

					<script>
                        var ul = document.getElementById('secendList');
                        var lis = ul.getElementsByTagName('li');
                        for(var i=0;i<lis.length;i++){
                            lis[i].onclick = function(){
                                document.getElementById("span1").innerHTML = this.innerHTML;
                            }
                        }
					</script>

					<script>
                        var ul1 = document.getElementById('secendList1');
                        var lis1 = ul1.getElementsByTagName('li');
                        for(var j=0;j<lis1.length;j++){
                            lis1[j].onclick = function(){
                                document.getElementById("span1").innerHTML = this.innerHTML;
                            }
                        }
					</script>




				</div>





					<div class="right">
						<div class="title" id="nav-tab">
							<a class="on" id="span1">发布仪器</a>
							<a>仪器使用次数占比情况</a>
						</div>
						<div id="contentBox">
							<table class="box1 active-tab">
								<tr>

									<th>仪器类别</th>
									<th>仪器名称</th>
									<th>所属机构</th>
									<th>租用次数</th>
									<th>使用时长</th>
								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>
								<tr>

									<td>质谱仪</td>
									<td>水检测</td>
									<td>福建省研究所生命研究院xxxxxx单位</td>
									<td>20</td>
									<td>10</td>

								</tr>


							</table>
							<div class="page-content sun_content box1" >
									<div class="sun_list">
										<div class="sun_king" style="background-color:rgb(243,243,243);">
											<div id="main" style=" margin-top:15px; width:940px;height:920px;background-color: #CCCCCC;padding:40px 20px;"></div>
										</div>
									</div>
								</div>
						</div>

					</div>

			</div>
		</div>

		<!--page-->
		<div class="myPage clearfix">
			<!--currentpage="1" numbercount="100"-->
			<ul class="page" maxshowpageitem="5" pagelistcount="10"  id="page"></ul>
		</div>

		<!--footer-->
		<footer>
			<div class="foot clearfix">
				<p>&copy; 2015-2020 科研仪器 版权所有 技术支持：科研仪器共享平台 支持电话：010-123658987 </p>
			</div>
		</footer>
		<script src="js/jquery-1.11.3.js"></script>
		<script src="js/common.js"></script>
	<script type="text/javascript">

        //简单jq tab   index从0开始
        $(function(){
            $("#nav-tab a").off("click").on("click",function(){
                var index = $(this).index();
                $(this).addClass("on").siblings().removeClass("on");
                $("#contentBox .box1").eq(index).addClass("active-tab").siblings().removeClass("active-tab");
            });
        });
	</script>



	<script src="js/new_js/echarts.min.js"></script>
	<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        option = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: [0, '30%'],

                    label: {
                        normal: {
                            position: 'inner'
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data: [
                        {value: 335, name: '直达', selected: true},
                        {value: 679, name: '营销广告'},
                        {value: 1548, name: '搜索引擎'}
                    ]
                },
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: ['40%', '55%'],

                    data: [
                        {value: 335, name: '直达'},
                        {value: 310, name: '邮件营销'},
                        {value: 234, name: '联盟广告'},
                        {value: 135, name: '视频广告'},
                        {value: 1048, name: '百度'},
                        {value: 251, name: '谷歌'},
                        {value: 147, name: '必应'},
                        {value: 102, name: '其他'}
                    ]
                }
            ]
        };

        myChart.setOption(option);
	</script>

	</body>

</html>